import React from 'react'
import imgSearch from '../../../assets/images/search.png'
import styled from 'styled-components'
import { useHistory } from 'react-router-dom'
import imgLogo from '../../../assets/images/logo.png'
import { Search } from './style'
import './icon.css'

const Counts =styled.div`
    height: 0.36rem;
    width: 0.36rem;
    background-color: red;
    border: 1px solid #fff;
    position: absolute;
    top: 7px;
    right: 58px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
`

export default function SearchInput(props) {
    const {selectGoods} = props
    console.log(selectGoods,'/////---');
    const history = useHistory()
    const goshoppingcart = () => {
        history.push(`/shoppingcart`)
    }

    return (
        <>
            <Search>
                <Counts style={selectGoods.length==0?{display:'none'}:{}}>{selectGoods.length}</Counts>
                <img src={imgLogo} className='sea-logo' />
                <div className="search-input">
                    <img src={imgSearch} className='sea-img-imgSearch' />
                    <input type="text"  placeholder='&nbsp;&nbsp;&nbsp;搜索商品'/>
                </div>
                <div className='one'>
                    <div className='ShopHeader-iconfont ShopHeader-icon-xiangzi'></div>
                    <div className='ShopHeader-iconfont ShopHeader-icon-gouwuchekong' onClick={goshoppingcart}></div>
                    <div className='ShopHeader-iconfont ShopHeader-icon-icon7'></div>
                </div>
            </Search>
        </>
    )
}